<template>
	<view class="nav">
		<view class="status" :style="{height: statusHeight+'px'}"></view>
		<view class="nav-bar" :style="{height: navBarHeight+'px'}">
			<view class="left" @click="handleToBack">
				<uni-icons type="back" size="20" color="#fff" />
			</view>
			<view class="center">
				<slot></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			statusHeight: {
				type:Number
			},
			navBarHeight: {
				type:Number
			}
		},
		methods: {
			handleToBack() {
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	.nav-bar {
	  display: flex;
	  text-align: center;
	}
	
	.left, .right {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 120rpx;
	}
	.center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
</style>
